import React from 'react';
import { Button, message } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import HistoryTabCard from '@/components/HistoryTabCard';
// import { StartTaskModal } from '../../components';
import Audited from './components/Audited';
import PendingAudit from './components/PendingAudit';
import NoNeed from './components/NoNeed';
import styles from './index.less';
import { ApplyAssessmentModal } from '../components';

/**
 *  我评估 功能菜单
 */
const Assessment = ({ location }) => {
    const {
        query: { currTab }
    } = location;

    // 发起任务弹窗显示与否
    // const [startModalVisible, setStartModalVisible] = React.useState(false);
    const [modalVisible, setModalVisible] = React.useState(false);
    const [modalTypes, setModalTypes] = React.useState(''); // 模态框类型
    const [curAllList, setCurAllList] = React.useState([]); // 全选的数据
    const [curList, setCurList] = React.useState([]); // 单行的数据
    const [clickType, setClickType] = React.useState(''); // 点击类型,批量'all' 单行'single'
    const tab1Ref = React.useRef();
    const tab2Ref = React.useRef();

    const tabList = [
        {
            key: 'tab1',
            tab: '待发起'
        },
        {
            key: 'tab2',
            tab: '已发起'
        },
        {
            key: 'tab3',
            tab: '无需估算'
        }
    ];

    const extraButtons = () => {
        if (currTab === undefined || currTab === 'tab1') {
            return (
                <React.Fragment>
                    <Button
                        type="primary"
                        className={styles.auditButton}
                        onClick={() => {
                            if (curAllList.length > 20) {
                                message.warning('每次发起不可超过20条');
                                return;
                            }
                            if (curAllList.length === 0) {
                                message.warning('请选择任务');
                                return;
                            }
                            setClickType('all');
                            setModalVisible(true);
                            setModalTypes('apply');
                        }}
                    >
                        批量发起估算
                    </Button>
                    <Button
                        style={{ marginLeft: 10 }}
                        type="primary"
                        className={styles.auditButton}
                        onClick={() => {
                            if (curAllList.length === 0) {
                                message.warning('请选择任务');
                                return;
                            }
                            setClickType('all');
                            setModalVisible(true);
                            setModalTypes('noNeed');
                        }}
                    >
                        批量无需估算
                    </Button>
                </React.Fragment>
            );
        }
        if (currTab === 'tab3') {
            return (
                <Button
                    type="primary"
                    className={styles.auditButton}
                    onClick={() => {
                        if (curAllList.length === 0) {
                            message.warning('请选择任务');
                        } else {
                            setClickType('all');
                            setModalVisible(true);
                            setModalTypes('goback');
                        }
                    }}
                >
                    移回待发起
                </Button>
            );
        }
        return '';
    };
    const handleOk = () => {
        if (modalTypes === 'apply' || modalTypes === 'noNeed') {
            // 发起估算接口请求
            tab1Ref.current.handleSubmit();
        }
        if (modalTypes === 'goback') {
            // 移回待发起
            tab2Ref.current.handleSubmit();
        }
        setCurList([]);
        setCurAllList([]);
    };

    React.useEffect(() => {
        setCurList([]);
        setCurAllList([]);
    }, [currTab]);
    return (
        <PageHeaderWrapper>
            <HistoryTabCard bordered={false} tabList={tabList} tabBarExtraContent={extraButtons()}>
                {/* 待发起 */}
                <PendingAudit
                    setModalVisible={setModalVisible}
                    setModalTypes={setModalTypes}
                    curAllList={curAllList}
                    setCurAllList={setCurAllList}
                    setCurList={setCurList}
                    setClickType={setClickType}
                    childRef={tab1Ref}
                />
                {/* 已发起 */}
                <Audited />
                {/* 无需估算 */}
                <NoNeed
                    setModalVisible={setModalVisible}
                    setModalTypes={setModalTypes}
                    curAllList={curAllList}
                    setCurAllList={setCurAllList}
                    setCurList={setCurList}
                    setClickType={setClickType}
                    childRef={tab2Ref}
                />
            </HistoryTabCard>
            {/* 公用弹窗 */}
            <ApplyAssessmentModal
                visible={modalVisible}
                setVisible={setModalVisible}
                onOk={handleOk}
                modalTypes={modalTypes}
                curAllList={curAllList}
                curList={curList}
                clickType={clickType}
            />
        </PageHeaderWrapper>
    );
};

export default Assessment;
